<template>
	<navigator hover-class="none" :url="'/pages/orderDetails/orderDetails?id='+orderid+'&status='+status+'&orderNo='+orderNo"
	 class="order-box shadow">
		<view class="order-item-title flex justify-between align-center">
			<view class="type">
				订单号：{{orderNo}}
			</view>
			<image class="delete" src="../../static/img/order/delete.png" mode=""></image>
		</view>
		<block v-for="item in listResult" :key="item.name">
			<view class="flex justify-start align-center order-item">
				<image class="order-img" :src="item.listPicUrl" mode=""></image>
				<view class="">
					<view class="title">
						{{item.commodityName}}
					</view>
					<view class="orderNo">
						收货人：{{name}}
					</view>
					<view class="price">
						￥{{item.retailPrice}} X {{item.number}}
					</view>
					<block v-if="status=='1'">
						<button class="cu-btn fahuo bg-orange" v-if="showBtn" @click="goTo()">
							发单
						</button>
					</block>
				</view>
			</view>
		</block>
		<view class="flex order-item-bottm  noBPd">
			<view class="flex-sub border flex flex-direction justify-center align-center">
				<view class="text" style="padding-bottom: 17upx;">状态</view>
				<view class="order-text order-type">{{orderStatus}}</view>
			</view>
			<view class="flex-sub border flex flex-direction justify-center align-center" v-if="status=='2'||status=='3'||status=='4'">
				<view class="text" style="padding-bottom: 17upx;">核销时间</view>
				<view class="order-text">{{offTime}}</view>
			</view>
			<view class="flex-sub border flex flex-direction justify-center align-center" v-else>
				<view class="text" style="padding-bottom: 17upx;">下单时间</view>
				<view class="order-text">{{createTime}}</view>
			</view>
			<view class="flex-sub  flex flex-direction justify-center align-center">
				<view class="text" style="padding-bottom: 17upx;">合计</view>
				<view class="order-text">￥{{total}}</view>
			</view>
		</view>
	</navigator>
</template>

<script>
	export default {
		props: ['orderid', 'name', 'title', 'img', 'orderNo', 'price', 'num', 'status', 'listResult', 'createTime', 'total',
			'offTime', 'showBtn'
		],
		computed: {
			orderStatus() {
				switch (this.status) {
					case 0:
						return '待支付';
						break;
					case 1:
						return '待发货';
						break;
					case 2:
						return '待评价';
						break;
					case 3:
						return '已完成';
						break;
					case 4:
						return '退货/款';
						break;
				}
			}
		},
		methods: {
			goTo() {
				uni.navigateTo({
					url: '/pages/delivery/delivery?id=' + this.orderid
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F8F8F8;
	}

	.order-box {
		width: 690upx;
		border-radius: 10upx;
		background-color: #ffffff;
		margin: 0 auto;
		padding: 6upx 18upx;
		margin-bottom: 35upx;
		padding: 36upx 0;
		margin-top: 30upx;
	}

	.order-item-title {
		padding: 0 30upx 30upx;
	}

	.order-item {
		padding: 40upx 30upx;
		position: relative;
		border-top: 1upx solid #eeeeee;
		border-bottom: 1upx solid #eeeeee;
	}

	.order-item-bottm {
		margin-top: 30upx;
	}

	.type {
		font-size: 30upx;
		line-height: 30upx;
		color: #282828;
	}

	.delete {
		width: 30upx;
		height: 30upx;
	}

	.order-img {
		width: 132upx;
		height: 132upx;
		margin-right: 23upx;
		border-radius: 10upx;
	}

	.title {
		font-size: 28upx;
		line-height: 28upx;
		color: #333333;
	}

	.orderNo {
		font-size: 26upx;
		line-height: 26upx;
		color: #999999;
		margin: 35upx 0 18upx 0;
	}

	.price {
		font-size: 26upx;
		line-height: 26upx;
		color: #999999;
	}

	.text {
		font-size: 26upx;
		line-height: 26upx;
		color: #999999;
	}

	.order-text {
		font-size: 28upx;
		line-height: 28upx;
		color: #4d4d4d;
		margin-top: 20upx;
	}

	.order-type {
		color: #fe7420;
	}

	.border {
		position: relative;
	}

	.border:after {
		display: block;
		content: '';
		position: absolute;
		width: 2upx;
		height: 56upx;
		background: #cacaca;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.fahuo {
		width: 130upx;
		height: 50upx;
		position: absolute;
		right: 20upx;
		bottom: 20upx;
	}
</style>
